<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="http://www.layuicdn.com/layui/css/layui.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/public.css">
		<link rel="stylesheet" href="./css/rechargeRecord.css">
		<title>飞鸟</title>
	</head>
	<body>
		<!-- 头部 -->
		<div class="head w-m clearfix">
			<!-- 已登录 -->
			<div class="logo">
				<img src="./img/flylogo.png" alt="" srcset="">
				<span>飞鸟图库</span>
			</div>
			<div class="info">
				<img src="./img/user.png" alt="">
				<span>尖尖上设计</span>
				<img src="./img/cor.png" alt="" srcset="">
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥52</span>
				<span>在线充值</span>
			</div>
			<!-- 未登录 -->
			<div class="login">
				<span>
					<a href="">登录</a> / <a href="">注册</a>
				</span>
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥0</span>
				<span>在线充值</span>
			</div>
		</div>
		<!-- banner -->
		<div class="banner">
			<div class="user clearfix">
				<div class="uInfo">
					<p>尖尖上设计</p>
					<p>会员用户</p>
				</div>
				<img src="./img/Buser.png" alt="" srcset="">
			</div>
		</div>
		<!-- main -->
		<div class="main w-m clearfix">
			<div class="main-l">
				<ul class="side">
					<li class="item" data-type="0">
						<a href="info.html">
							<img src="img/class1.png">
							<span>个人信息</span>
						</a>
					</li>
					<li class="item" data-type="1">
						<a href="down.html">
							<img src="img/down1.png">
							<span>下载记录</span>
						</a>
					</li>
					<li class="item active" data-type="2">
						<a href="rechargeRecord.html">
							<img src="img/book2.png">
							<span>充值记录</span>
						</a>
					</li>
					<li class="item" data-type="3">
						<a href="price.html">
							<img src="img/money1.png">
							<span>价格列表</span>
						</a>
					</li>
					<li class="item" data-type="4">
						<a href="">
							<img src="img/help1.png">
							<span>服务条款</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="main-r">
				<div class="cRight-top">
					<h1>充值记录</h1>
					<p class="on">支付宝</p>
					<p>微信</p>
				</div>
				<div class="cRight-con on">
					<ul>
						<li>
							<span>19-08-13</span>
							<span>100元</span>
							<img src="./img/zfb.png" alt="" srcset="">
							<span>支付宝充值</span>
							<span>成功</span>
						</li>
						<li>
							<span>19-08-13</span>
							<span>100元</span>
							<img src="./img/zfb.png" alt="" srcset="">
							<span>支付宝充值</span>
							<span>成功</span>
						</li>
						<li>
							<span>19-08-13</span>
							<span>100元</span>
							<img src="./img/zfb.png" alt="" srcset="">
							<span>支付宝充值</span>
							<span>成功</span>
						</li>						
					</ul>
					<div id="demo0"></div>
				</div>
				<div class="cRight-con">
					<ul>
						<li>
							<span>19-08-13</span>
							<span>100元</span>
							<img src="./img/wx.png" alt="" srcset="">
							<span>微信充值</span>
							<span>成功</span>
						</li>
						<li>
							<span>19-08-13</span>
							<span>100元</span>
							<img src="./img/wx.png" alt="" srcset="">
							<span>微信充值</span>
							<span>成功</span>
						</li>
						<li>
							<span>19-08-13</span>
							<span>100元</span>
							<img src="./img/wx.png" alt="" srcset="">
							<span>微信充值</span>
							<span>成功</span>
						</li>
						<li>
							<span>19-08-13</span>
							<span>100元</span>
							<img src="./img/wx.png" alt="" srcset="">
							<span>微信充值</span>
							<span>成功</span>
						</li>
						<li>
							<span>19-08-13</span>
							<span>100元</span>
							<img src="./img/wx.png" alt="" srcset="">
							<span>微信充值</span>
							<span>成功</span>
						</li>
						<li>
							<span>19-08-13</span>
							<span>100元</span>
							<img src="./img/wx.png" alt="" srcset="">
							<span>微信充值</span>
							<span>成功</span>
						</li>
					</ul>
					<div id="demo1"></div>
				</div>
			</div>
		</div>
		</div>
		<!-- 底部 -->
		<div class="foot">			
			<div class="foot-bottom">
				<a href="">COPYRIGHT (©) 2018 版权所有： 飞鸟图库</a>
			</div>
		</div>
		<script src="./layui/layui.js"></script>
		<script>
			layui.use(['laypage', 'layer', 'jquery'], function() {
				var laypage = layui.laypage,
					layer = layui.layer;
				var $ = layui.$;
				//选项卡
				$('.cRight-top p').click(function() {
					$(this).siblings().removeClass('on');
					$(this).addClass('on');
					var index = $(this).index(); // 获取当前点击元素的下标
					$('.cRight-con').removeClass('on');
					$('.cRight-con').eq(index-1).addClass('on');
				})
				var arr = [{
						img1: 'img/class1.png',
						img2: 'img/class2.png',
					},
					{
						img1: 'img/down1.png',
						img2: 'img/down2.png',
					},
					{
						img1: 'img/book1.png',
						img2: 'img/book2.png',
					},
					{
						img1: 'img/money1.png',
						img2: 'img/money2.png',
					},
					{
						img1: 'img/help1.png',
						img2: 'img/help2.png',
					}
				]
				$('.side li').not(".active").hover(function() {
					$(this).addClass('active1');
					$(this).find('img')[0].src = arr[$(this).attr("data-type")].img2;
				}, function() {
					$(this).removeClass('active1');
					$(this).find('img')[0].src = arr[$(this).attr("data-type")].img1;
				})
				//总页数低于页码总数
				laypage.render({
					elem: 'demo0',
					count: 50, //数据总数
					jump: function(obj) {
						// console.log(obj)
					}
				});
				laypage.render({
					elem: 'demo1',
					count: 50 ,//数据总数
					jump: function(obj) {
						// console.log(obj)
					}
				});
			})
		</script>
	</body>
</html>
